<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="公司职位设置"></my-header>
		
		<view>
			<view class="main-zhong4">
				
				<!--市场部门-->
				<block v-for="(item, index) in list" :key="index">
					<view>
						<view class="dis_flex ali-ite">
							<u-icon size="28" :name="imgurl+'my-companyPost-shichang.png'"></u-icon>
							<view class="mar-lef-3">{{item.d_name}}</view>
							<u-icon class="mar-lef-3" size="18" color="#19BE6B" name="qzone-circle-fill"></u-icon>
						</view>
						<view class="mar-lef-15">
							<block v-if="item.son">
								<u-tag 
									v-for="(ite, inde) in item.son" 
									:key="inde" 
									@close="close(ite.id)" 
									:text="ite.d_name" type="primary" size="mini" :closeable="true" 
								/>
							</block>
						</view>
					</view>
					<u-gap height="2" margin-top="20" margin-bottom="20" bg-color="#bbb"></u-gap>
				</block>
				
			</view>
			<view @click="addShow = true" class="main-zhong4 mar-top-10 dis_flex jus-cen">
				<view><u-icon size="38" :name="imgurl+'my-companyPost-xinzeng.png'"></u-icon></view>
				<view class="mar-lef-5 fon-siz-16">新增公司部门</view>
			</view>
			<view @click="addSonShow = true" class="main-zhong4 mar-top-10 dis_flex jus-cen">
				<view><u-icon size="38" :name="imgurl+'my-companyPost-xinzeng.png'"></u-icon></view>
				<view class="mar-lef-5 fon-siz-16">新增部门子类</view>
			</view>
		</view>
		
		
		<!--新增公司部门-->
		<u-form :model="form" ref="uForm">
			<view>
				<u-modal @confirm="addSub" v-model="addShow" :mask-close-able="true" title="新增公司部门" show-title="true" :show-confirm-button="false" >
					<view class="slot-content">
						<u-form-item :required="true" label-width="70px" label="部门名称" prop="d_name" :border-bottom="false">
							<u-input :clearable="false" placeholder="请输入部门名称" placeholder-style="font-size:11px;" v-model="form.d_name" :custom-style="shuomingStyle" />
						</u-form-item>
						<view class="address" style="margin:30rpx 0 0rpx 0;">
							<button @click="addShow = false" type="warn">取消</button>
							<button @click="addSub()" style="background:#0051BA" type="primary" >提交</button>
						</view>
					</view>
				</u-modal>
			</view>
		</u-form>
		<!--新增公司部门子类-->
		<u-form :model="twoform" ref="twouForm">
			<view>
				<u-modal @confirm="addSonSub" v-model="addSonShow" :mask-close-able="true" title="新增部门子类" show-title="true" :show-confirm-button="false" >
					<view class="slot-content">
						
						<u-form-item :required="true" label-width="70px" label="所属部门" prop="radio" :border-bottom="false">
							<u-radio-group v-model="twoform.radio" size="22">
								<u-radio label-size="22" v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						
						<u-form-item :required="true" label-width="70px" label="职位名称" prop="d_name" :border-bottom="false">
							<u-input :clearable="false" placeholder="请输入职位名称" placeholder-style="font-size:11px;" v-model="twoform.d_name" :custom-style="shuomingStyle" />
						</u-form-item>
						<view class="address" style="margin:30rpx 0 0rpx 0;">
							<button @click="addSonShow = false" type="warn">取消</button>
							<button @click="addSonSub()" style="background:#0051BA" type="primary" >提交</button>
						</view>
					</view>
				</u-modal>
			</view>
		</u-form>
		
		<!--删除确认按钮-->
		<u-modal @confirm="deleteDepartmentSon()" v-model="deleteShow" :mask-close-able="true" show-title="true" show-cancel-button="true">
			<view class="slot-content">
				<rich-text>是否删除该部门子类</rich-text>
			</view>
		</u-modal>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background	: {
					backgroundColor: ' ',
				},
				deleteId   : '',
				deleteShow : false,
				radioValue : '',
				radioList: [],
				list : '',
				form : {
					d_name : '',
				},
				twoform : {
					radio  : '',
					d_name : '',
				},
				rules: {
					d_name: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '部门名称不能为空！',
							trigger: ['change','blur']
						},
					],
				},
				tworules: {
					radio: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '所属部门不能为空！',
							trigger: ['change','blur']
						},
					],
					d_name: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '职位名称不能为空！',
							trigger: ['change','blur']
						},
					]
				},
				shuomingStyle : {
					minWidth:'100rpx',
					borderBottom:'1px solid #ccc',
					minHeight:'30px',
				},
				addShow : false, // 新增公司部门
				addSonShow : false, // 新增公司部门子类
				listBoxStyle: `height: 25px; font-size: 11px;`,
				shichangList: [
					{value:'事业部总监',type:1},
					{value:'区域市场经理',type:2},
					{value:'城市经理',type:3},
					{value:'市场经理',type:4},
					{value:'市场专员',type:5},
					{value:'运维专员',type:6},
					{value:'+新增职位',type:7},
				],
				neiqinList: [
					{value:'内勤部总监',type:1},
					{value:'内勤经理',type:2},
					{value:'内勤主管',type:3},
					{value:'内勤专员',type:4},
					{value:'+新增职位',type:5},
				],
				caiwuList: [
					{value:'财务部总监',type:1},
					{value:'财务经理',type:2},
					{value:'财务主管',type:3},
					{value:'财务专员',type:4},
					{value:'+新增职位',type:5},
				],
				yanfaList: [
					{value:'研发部总监',type:1},
					{value:'研发部经理',type:2},
					{value:'研发部PHP',type:3},
					{value:'+新增职位',type:4},
				],
			}
		},
		methods:{
			// 部门子类删除事件
			async deleteDepartmentSon(id){
				let data = {
					id : this.deleteId
				}
				let res = await this.asyncPublic('/my/companyPost/deleteDepartmentSon',data)
				this.list = res.data.info
			},
			// 部门子类删除事件
			close(e){
				this.deleteId = e
				this.deleteShow = true
			},
			// 首次查询事件
			async onSelect(){
				let res = await this.asyncPublic('/my/companyPost/onSelect',1)
				this.list = res.data.info
				this.radioList = res.data.radioList
				this.load_close();
			},
			// 新增部门子类事件
			addSonSub(){
				this.$refs.twouForm.validate(valid => {
					if (valid) {
						this.sonSub();
						this.addSonShow = false
					} else {
						console.log('验证失败');
					}
				});
			},
			// 新增部门子类事件
			async sonSub(){
				let data = {
					radio  : this.twoform.radio ,
					d_name : this.twoform.d_name ,
				}
				let res = await this.asyncPublic('/my/companyPost/addDepartmentSon',data)
				this.list = res.data.info
				console.log(res)
				if( res.data.code == 200 )
				{
					this.$refs.uToast.show({
						title: res.data.message,
						type: 'success',
					})
				}
			},
			// 新增公司部门确认事件
			addSub(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.Sub();
						this.addShow = false
					} else {
						console.log('验证失败');
					}
				});
			},
			// 新增公司部门确认事件
			async Sub( f_id = 0 ){
				let data = {
					d_name : this.form.d_name ,
					f_id   : f_id ,
				}
				let res = await this.asyncPublic('/my/companyPost/addDepartment',data)
				this.list = res.data.info
				if( res.data.code == 200 )
				{
					this.$refs.uToast.show({
						title: res.data.message,
						type: 'success',
					})
				}
			},
			// 市场部门选择事件
			shichangChange(e){
				this.form.accountBook = e.orignItem.value ;
				this.form.accountBook2 = e.orignItem.type ;
				console.log(e)
			},
		},
		onLoad() {
			this.load();
			this.onSelect()
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if( res.scrollTop > 0 )
			{
				this.background.backgroundColor = '#005687';
			}else{
				this.background.backgroundColor = ' ';
			}
		},
		components:{
			myHeader,
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.$refs.twouForm.setRules(this.tworules);
		}
	}
</script>

<style>
	.u-tag{
		margin-top:10px !important;
		margin-right:10px !important;	
	}
	.address{
		display:flex;
		align-items: center;
		justify-content: space-between;
		margin-top:10rpx;
	}
	.address button{
		font-size:13px;
		width:140px;
		border-radius: 20px;
	}
	.address h2{
		width:180rpx;
		text-align:center;
		border:1rpx solid #ccc;
		padding:10rpx 0 10rpx 0;
	}
	.slot-content{
		padding:20px;
		font-size:18px;
		color:red;
		text-align: center;
	}
	.main-zhong4 {
		width: 100%;
		border-radius: 8px;
		background: #fff;
		padding:10px 20px 10px 20px;
	}
	.main {
		padding:10px;
		position: relative;
		min-height:100vh;
		background-image: linear-gradient( #005687, #E4E4E5 );
	}
	page{
		height:100%;
	}
</style>
